<!--
	通用全屏底部按键组件
	author yjl
 -->
<template>
	<view
		:style="{
			'background-color': bgColor
		}"
		class="bottom-btn"
	>
		<button
			:style="{
				'margin': '10px 15%',
				'background-color': btnBgColor,
				'color': color,
				'padding': padding
			}"
			:class="disabled ? 'disabled' : ''"
			:disabled="disabled"
			@click="clickBtn"
		>
			<slot />
			{{text}}
		</button>
	</view>
</template>

<script>
export default {
  props: {
    text: String,
    bgColor: { // 底部背景色
      type: String,
      default: '#6782f1'
    },
    btnBgColor: { // 按键背景色
      type: String,
      default: '#FFFFFF'
    },
    color: {
      type: String,
      default: '#6782f1'
    },
    padding: {
      type: String,
      default: '2px'
    },
    linkTo: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickBtn() {
      if (this.linkTo) {
        uni.navigateTo({
          url: this.linkTo
        })
      } else {
        this.$emit('click')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-btn {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  border-top-left-radius: $radiusLarge;
  border-top-right-radius: $radiusLarge;

  .disabled {
    color: $dark2 !important;
    background-color: $dark4 !important;
  }
}
</style>
